<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Random K Force Graph</title>
    <link type="text/css" rel="stylesheet" href="css/social_media.css"/>
</head>
<body>
<div align="middle" id="content" style="width:100%"></div>
<!--<div id="info" style="width:20%; float:left " >-->
    <!--<label>Node Info:</label>-->
    <!--<label>Node Id:</label> <label id="node_id"></label>-->
    <!--<label>Node Degree:</label> <label id="node_degree"></label>-->
    <!--<label>Link Info:</label>-->
<!--</div>-->
<script src="js/d3.js" charset="utf-8"></script>
<script>
    var data="data/random_k_data.json";
    d3.select("svg").remove();
    var window_width=window.screen.width;
    var window_height=window.screen.height;
    var width = window_width*0.55,
            height = window_height*0.85;

    var vis = d3.select("#content")
            .append("svg:svg")
            .attr("width", width)
            .attr("height", height)
            .attr("pointer-events", "all")
            .append('svg:g')
            .call(d3.behavior.zoom().on("zoom", redraw))
            .append('svg:g');

    vis.append('svg:rect')
            .attr('width', width)
            .attr('height', height)
            .attr('fill', 'rgba(1,1,1,0)');

    function redraw() {
        console.log("here", d3.event.translate, d3.event.scale);
        vis.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); };

    var force = d3.layout.force()
            .charge(-250)
            .linkDistance(400)
        // .gravity(0.8)//重力
            .size([width, height]);




    var svg = d3.select(".text").append("svg")
            .attr("width", width)
            .attr("height", height);

    d3.json(data, function(error, graph) {

        var link = vis.selectAll(".link")
                .data(graph.edges)
                .enter().append("line")
                .attr("class", "link")
                .style("stroke-width", function(d) { return 5; })
                .style("stroke", function(d) {
                    if(d.value<0){
                        return "#ff0000";
                    }
                    else
                        return "#94c0be";
                });

        link.append("title")//设置边的value
                .text(function(d) { return d.value } );

        var drag = force.drag()
                .on("dragstart",function(d,i){
                    d.fixed = true;    //拖拽开始后设定被拖拽对象为固定
                });

        var node = vis.selectAll(".node")
                .data(graph.nodes)
                .enter().append("svg:g")
                .attr("class", "node")
                .call(drag);

        node.append("svg:circle")
                .attr("r", function(d){return Math.max(Math.log(d.dtotal),5);})
                .style("fill", function(d) {
                    if(d.state==1){
                        return "#ff0000";
                    }
                    else{
                        return "#00ff00";
                    }
                })
                .on("dblclick",function(d,i){
                    d.fixed = false;
                })
                .style("fill", function(d) { if(d.style == 'filled') { return d.color;} })
                .style("stroke", function(d) { if(d.style !== 'filled') { return d.color;} })
                .style("stroke-width", "4")
                .on("mouseover", function(d){
                    d.show = true;
                    d3.select(this).style("fill", "#ff0000");
                })//设置节点颜色
            //鼠标点击事件
                .on("click", function(d){
                    d3.select(this).style("fill", "#ff0000");
                    var linkm = vis.selectAll("line")
                            .data(json.links)
                            .style("stroke", function(d1) {
                                console.log(d1.source.name);
                                //console.log(d);
                                if(d1.source.name == d.name) { return "red";}})
                })
                .on("mouseout", function(d) {
                    d.show = false;
                    if (d.style == 'filled') { d3.select(this).style("fill",d.color); }
                    else {
                        d3.select(this).style("stroke",d.color);
                        d3.select(this).style("fill", d.color);//设置鼠标移动后节点颜色
                        //console.log("Ihere", d.color);
                    }
                });

        node.append("title")
                .text(function(d) { return d.label; });

        force
                .nodes(graph.nodes)
                .links(graph.edges)
                .start();

        force.on("tick", function() {
            link.attr("x1", function(d) { return d.source.x; })
                    .attr("y1", function(d) { return d.source.y; })
                    .attr("x2", function(d) { return d.target.x; })
                    .attr("y2", function(d) { return d.target.y; })
                    .style("stroke-width", function (d) {
                        if (d.source.show || d.target.show)
                            return 5;
                        else
                            return 1;
                    });

            node.attr("cx", function(d) { return d.x; })
                    .attr("cy", function(d) { return d.y; })
                    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";});
        });
    });
</script>
</body>
</html>